<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>文章列表</title>-->
<!--    <style>-->
<!--        body {-->
<!--            font-family: 'Arial', sans-serif;-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            background-color: #f4f4f9;-->
<!--            color: #333;-->
<!--        }-->
<!--        h1 {-->
<!--            text-align: center;-->
<!--            color: #0056b3;-->
<!--        }-->
<!--        #articlesContainer {-->
<!--            display: flex;-->
<!--            flex-direction: column;-->
<!--            align-items: center;-->
<!--            padding: 20px;-->
<!--        }-->
<!--        .articleDiv {-->
<!--            width: 80%;-->
<!--            margin: 10px;-->
<!--            padding: 20px;-->
<!--            background-color: white;-->
<!--            box-shadow: 0 2px 5px rgba(0,0,0,0.1);-->
<!--            border-radius: 8px;-->
<!--        }-->
<!--        a {-->
<!--            font-size: 24px;-->
<!--            color: #0056b3;-->
<!--            text-decoration: none;-->
<!--            font-weight: bold;-->
<!--        }-->
<!--        a:hover {-->
<!--            text-decoration: underline;-->
<!--        }-->
<!--        p {-->
<!--            font-size: 16px;-->
<!--            color: #666;-->
<!--            line-height: 1.6;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->

<!--<h1>文章列表</h1>-->
<!--<div id="articlesContainer"></div>-->

<!--<script>-->
<!--    document.addEventListener("DOMContentLoaded", function() {-->
<!--        const apiUrl = 'http://localhost:8087/api/posts';  // 假定的API URL-->

<!--        fetch(apiUrl)-->
<!--            .then(response => response.json())-->
<!--            .then(articles => {-->
<!--                const container = document.getElementById('articlesContainer');-->
<!--                articles.forEach(article => {-->
<!--                    const articleDiv = document.createElement('div');-->
<!--                    articleDiv.className = 'articleDiv';  // 设置类名以应用CSS-->

<!--                    const titleLink = document.createElement('a');-->
<!--                    const contentSnippet = document.createElement('p');-->

<!--                    titleLink.textContent = article.title;-->
<!--                    titleLink.href = `post-details.html?postId=${article.postId}`;-->
<!--                    contentSnippet.textContent = article.content.substring(0, 100) + '...'; // 显示内容的前100个字符-->

<!--                    articleDiv.appendChild(titleLink);-->
<!--                    articleDiv.appendChild(contentSnippet);-->
<!--                    container.appendChild(articleDiv);-->
<!--                });-->
<!--            })-->
<!--            .catch(error => console.error('Error loading articles:', error));-->
<!--    });-->
<!--</script>-->

<!--</body>-->
<!--</html>-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章列表</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
            color: #333;
        }
        h1 {
            text-align: center;
            color: #0056b3;
        }
        #articlesContainer, #pagination {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        .articleDiv {
            width: 80%;
            margin: 10px;
            padding: 20px;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            border-radius: 8px;
        }
        a {
            font-size: 24px;
            color: #0056b3;
            text-decoration: none;
            font-weight: bold;
        }
        a:hover {
            text-decoration: underline;
        }
        p {
            font-size: 16px;
            color: #666;
            line-height: 1.6;
        }
        .search-box {
            width: 80%;
            margin: auto;
            padding: 20px;
        }
        input[type="text"], input[type="button"], select {
            padding: 10px;
            margin: 5px;
            font-size: 16px;
        }
    </style>
</head>
<body>

<h1>考研资讯信息</h1>
<div class="search-box">
    <input type="text" id="searchInput" placeholder="输入你要搜索的内容...">
    <input type="button" value="搜索" onclick="filterArticles()">
</div>
<div id="articlesContainer"></div>
<div>

    <select id="pagination" onchange="changePage(this.value)"></select>
</div>

<script>
    let currentArticles = [];
    let currentPage = 1;
    const articlesPerPage = 10;

    document.addEventListener("DOMContentLoaded", function() {
        const apiUrl = 'http://localhost:8087/api/posts';
        fetch(apiUrl)
            .then(response => response.json())
            .then(articles => {
                currentArticles = articles;
                displayArticles(currentPage);
            })
            .catch(error => console.error('Error loading articles:', error));
    });

    function displayArticles(page) {
        const container = document.getElementById('articlesContainer');
        container.innerHTML = ''; // Clear existing articles
        const startIndex = (page - 1) * articlesPerPage;
        const endIndex = startIndex + articlesPerPage;
        const articlesToShow = currentArticles.slice(startIndex, endIndex);

        articlesToShow.forEach(article => {
            const articleDiv = document.createElement('div');
            articleDiv.className = 'articleDiv';

            const titleLink = document.createElement('a');
            const contentSnippet = document.createElement('p');

            titleLink.textContent = article.title;
            titleLink.href = `post-details.html?postId=${article.postId}`;
            contentSnippet.textContent = article.content.substring(0, 100) + '...';

            articleDiv.appendChild(titleLink);
            articleDiv.appendChild(contentSnippet);
            container.appendChild(articleDiv);
        });

        setupPagination(currentArticles.length);
    }

    function setupPagination(totalItems) {
        const paginationSelect = document.getElementById('pagination');
        paginationSelect.innerHTML = '';
        const pageCount = Math.ceil(totalItems / articlesPerPage);

        for (let i = 1; i <= pageCount; i++) {
            const option = document.createElement('option');
            option.value = i;
            option.textContent = 'Page ' + i;
            paginationSelect.appendChild(option);
        }
    }

    function changePage(page) {
        currentPage = parseInt(page);
        displayArticles(currentPage);
    }

    function filterArticles() {
        const searchValue = document.getElementById('searchInput').value.toLowerCase();
        currentArticles = currentArticles.filter(article => article.title.toLowerCase().includes(searchValue));
        displayArticles(1);
    }
</script>

</body>
</html>
